<template>
  <a-drawer :title="title" width="90%" destroyOnClose :visible="visible" @close="() => {
    this.visible = false
  }
    ">
    <!-- 页签 -->
    <a-tabs default-active-key="1">

      <!-- 基本信息 -->
      <a-tab-pane key="1" tab="基本信息">
        <a-form-model ref="form" :model="entity" :rules="rules" v-bind="layout">
          <a-row type="flex" justify="space-around">
            <a-col :span="9">
              <a-form-item label="项目图片" :labelCol="layout.labelCol" prop="Project_Photo_Url" :wrapperCol="layout.wrapperCol">
                <img alt="" style="width: 100%; height: 300px;" :src="entity.Project_Photo_Url" />
              </a-form-item>
            </a-col>
            <!-- 右侧信息 -->
            <a-col :span="11">
              <a-form-model-item label="项目名称" prop="Name">
                <a-input v-model="entity.Name" autocomplete="off" />
              </a-form-model-item>
              <a-form-model-item label="项目描述" prop="Describe">
                <a-input v-model="entity.Describe" autocomplete="off" type="textarea" />
              </a-form-model-item>
              <a-row><a-col :span="8">
                  <a-form-model-item label="国家" prop="Country">
                    <a-input v-model="entity.Country" autocomplete="off" />
                  </a-form-model-item></a-col>
                <a-col :span="8">
                  <a-form-model-item label="所在省份" prop="Province">
                    <a-input v-model="entity.Province" autocomplete="off" />
                  </a-form-model-item></a-col>
                <a-col :span="8">
                  <a-form-model-item label="所在市" prop="City">
                    <a-input v-model="entity.City" autocomplete="off" />
                  </a-form-model-item></a-col> </a-row>
              <a-row><a-col :span="12">
                  <a-form-model-item label="项目类型" prop="ProjectType">
                    <a-input v-model="entity.ProjectType" autocomplete="off" />
                  </a-form-model-item></a-col>
                <a-col :span="12">
                  <a-form-model-item label="建筑类型" prop="BuildingType">
                    <a-input v-model="entity.BuildingType" autocomplete="off" />
                  </a-form-model-item></a-col></a-row>
              <a-form-model-item label="气候带" prop="ClimaticZone">
                <a-input v-model="entity.ClimaticZone" autocomplete="off" />
              </a-form-model-item>
              <a-row><a-col :span="12">
                  <a-form-model-item label="项目业态名称" prop="Formats">
                    <a-input v-model="entity.Formats" autocomplete="off" />
                  </a-form-model-item></a-col>
                <a-col :span="12">
                  <a-form-model-item label="建筑总面积" prop="TotalArea">
                    <a-input v-model="entity.TotalArea" autocomplete="off" />
                  </a-form-model-item></a-col></a-row>
              <a-row><a-col :span="12">
                  <a-form-model-item label="地上建筑面积" prop="OnGroundArea">
                    <a-input v-model="entity.OnGroundArea" autocomplete="off" />
                  </a-form-model-item></a-col>
                <a-col :span="12">
                  <a-form-model-item label="地下建筑面积" prop="UnderGroundArea">
                    <a-input v-model="entity.UnderGroundArea" autocomplete="off" />
                  </a-form-model-item></a-col></a-row>

              <a-form-model-item label="创建日期" prop="CreateTime" >
                <a-input v-model="CreateTime" autocomplete="off" />
              </a-form-model-item>
            </a-col>
          </a-row> </a-form-model>
      </a-tab-pane>

      <a-tab-pane key="2" tab="任务">
        <RwForm :pId="entity.Id" ref="rwForm"></RwForm>
      </a-tab-pane>
      <a-tab-pane key="3" tab="项目报告">
        <FileList :pId="entity.Id" ref="fileList"></FileList>
      </a-tab-pane>
      <a-tab-pane key="4" tab="项目成员">
        <TeamList :pId="entity.Id" ref="teamlist"></TeamList>
      </a-tab-pane>

    </a-tabs>
    <div :style="{
      position: 'absolute',
      right: 0,
      bottom: 0,
      width: '100%',
      borderTop: '1px solid #e9e9e9',
      padding: '5px 16px',
      background: '#fff',
      textAlign: 'right',
      zIndex: 1
    }">
      <a-button @click="close">返回</a-button>&nbsp;
    </div>
  </a-drawer>
</template>

<script>
import RwForm from './RwForm'  //任务
import FileList from './FileList'  //报告
import TeamList from './TeamList'  //成员
export default {
  components: {
    TeamList,
    RwForm,
    FileList,
  },
  props: {

  },
  mounted() {
    this.$nextTick(() => {
      // 页面渲染完成后的回调
      this.tableHeight = this.getTableHeight(true) + 24
    })
    // this.openForm()
  },
  data() {
    return {
      layout: {
        labelCol: { span: 6 },
        wrapperCol: { span: 19 }
      },
      visible: false,
      confirmLoading: false,
      entity: {},
      title: '',
      rules: {},
      CreateTime:''
    }
  },
  methods: {
    close() {
      this.visible = false
      this.entity = {}

    },
      init() {
        this.visible = true
      },
      openForm(id, title) {
        this.init()
        this.title = title
        if (id) {
          this.$http.post('/Base_ProjectWork/Base_Project/GetTheData', { id: id }).then(resJson => {
            this.entity = {}
            setTimeout(() => {
              this.entity = resJson.Data
              this.CreateTime=resJson.Data.CreateTime.substring(0, 10)
            }, 1)
          })
        }
      },


    }
  }
</script>
<style lang="less" scoped>
.ant-form-item {
  display: flex;
}

/deep/.ant-form-item-label {
  width: 100px;
}

/deep/.ant-form-item-control-wrapper {
  flex: 1;
}
</style>
